<template>

    <div class="flex justify-between items-center flex-wrap">
        <div v-for="(shadow, i) in shadowGroup" :key="i" class="flex flex-col justify-center items-center" m="auto"
            w="46">
            <div class="inline-flex" h="30" w="30" m="2" :style="{
                boxShadow: `var(${getCssVarName(shadow.type)})`,
            }" />
            <span p="y-4" class="demo-shadow-text" text="sm">
                {{ shadow.name }}
            </span>
            <code text="xs">
        {{ getCssVarName(shadow.type) }}
      </code>
        </div>
    </div>
    <div style="box-shadow: var(--el-box-shadow); width: 150px; height: 150px ; ">
    </div>
    <div style="box-shadow: var(--el-box-shadow-dark); width: 150px; height: 150px ; ">
    </div>

</template>
<style></style>
<script setup>
import { ref } from 'vue'

const shadowGroup = ref([
    {
        name: 'Basic Shadow',
        type: '',
    },
    {
        name: 'Light Shadow',
        type: 'light',
    },
    {
        name: 'Lighter Shadow',
        type: 'lighter',
    },
    {
        name: 'Dark Shadow',
        type: 'dark',
    },
])
const getCssVarName = (type) => {
    return `--el-box-shadow${type ? '-' : ''}${type}`
}
console.log(getCssVarName())

</script>